// 本页面只有两个功能:渲染和修改;

// 修改完毕后需要再次渲染,所以渲染封装成函数
function renderScore() {
    axios({
        method: 'GET',
        url: '/score/list',
    }).then(({ data: res }) => {
        // 判断业务状态码是否为 0
        if (res.code == 0) {
            // console.log(res.data);
            // 返回的res.data数据是对象,不能再使用map()
            // 自定义一个空数组,在for循环中向数组中push()字符串
            let arr = []
            // 对象应该用for...in...
            for (let k in res.data) {
                // k代表属性名,即学生id
                // res.data[k]代表id对应的值:'name','group','score'  
                arr.push(
                    `<tr>
                        <th scope="row">${k}</th>
                        <td>${res.data[k].name}</td>
                        <td class="score" data-index='1' data-id='${k}'>${res.data[k].score[0]}</td>
                        <td class="score" data-index='2' data-id='${k}'>${res.data[k].score[1]}70</td>
                        <td class="score" data-index='3' data-id='${k}'>${res.data[k].score[2]}70</td>
                        <td class="score" data-index='4' data-id='${k}'>${res.data[k].score[3]}70</td>
                        <td class="score" data-index='5' data-id='${k}'>${res.data[k].score[4]}70</td>
                    </tr>`
                )
            }
            //赋值
            document.querySelector('tbody').innerHTML = arr.join('');
        }
    })
}
renderScore()
const tbody = document.querySelector('tbody');
// 需求2 修改功能思路分析
//  2.1 点击类名为score的td,在里面添加一个input
//  2.2 input失去光标,恢复原值
//  2.3 input中回车,ajax修改成绩

//  2.1 点击类名为score的td,在里面添加一个input(事件委托)
tbody.addEventListener('click', function (e) {
    // 判断如果不是类名包含score就退出
    // console.log(1);
    if (e.target.className != 'score') return
    // 通过if判断后, 后面所有的e.target都是td
    // 在清空之前存储td中的值,后面使用
    const num = e.target.innerHTML
    // 先清空td中的内容
    e.target.innerHTML = ''
    // 在里面添加一个input
    const input = document.createElement('input')
    // 在input中设置原值
    input.value = num
    // 并添加到td中
    e.target.appendChild(input)
    // input自动获取插入条光标
    input.focus()
    // 2.2 input失去光标,恢复原值 (创建input立即绑定事件)
    input.addEventListener('blur', function () {
        // td恢复原值
        e.target.innerHTML = num
    })
    // 2.3 input中回车,ajax修改成绩
    input.addEventListener('keyup', function (event) {
        if (event.key != 'Enter') return
        // 是回车就要发送ajax
        axios({
            method: 'post',
            url: '/score/entry',
            data: {
                // this代指input,但是data.id绑定在td身上
                // this.parentNode===e.target 就是input的父标签
                "stu_id": this.parentElement.dataset.id,//学生id
                "batch": e.target.dataset.index,//第几次成绩
                "score": this.value//要修改的成绩
            },//请求体参数
        }).then(({ data: res }) => {
            // 判断业务状态码是否为0
            if (res.code == 0) {
                // 成功提示
                toastr.success('恭喜您,修改成绩成功')
                // 重新渲染成绩
                renderScore()
            }
        })
    })
})

